<template>
    <div class="enter-work-account-safe">
        <div class="account-safe-content-view">
            <div class="safe-list">
                <div class="safe-item flex-row-space-between">
                    <div class="flex-row-start flex-center">
                        <img class="img" src="../../../assets/image/enterprise/user.png" alt="a">
                        <div class="ml10">
                            <p class="text-black mb5 bold">用户名</p>
                            <p class="text-gray">展示给企业查看，建议您修改为真实姓名</p>
                        </div>
                    </div>
                    <div class="text-blue text-r">
                        <div class="mb10">{{info.userName}}</div>
                        <a @click="updateUserName">修改</a>
                    </div>
                </div>
                <div class="safe-item flex-row-space-between">
                    <div class="flex-row-start flex-center">
                        <img class="img" src="../../../assets/image/enterprise/lock.png" alt="a">
                        <div class="ml10">
                            <p class="text-black mb5 bold">密码</p>
                            <p class="text-gray">上一次登录：2020-08-26 17:56:20</p>
                        </div>
                    </div>
                    <div class="text-blue text-r">
                        <div class="mb10">******</div>
                        <div>
                            <router-link to="/enterprise/change-password">
                                修改
                            </router-link>
                        </div>
                    </div>
                </div>
                <div class="safe-item flex-row-space-between">
                    <div class="flex-row-start flex-center">
                        <img class="img" src="../../../assets/image/enterprise/mail.png" alt="a">
                        <div class="ml10">
                            <p class="text-black mb5 bold">邮箱</p>
                            <p class="text-gray">绑定邮箱，可以增加求职反馈的及时性和准确性</p>
                        </div>
                    </div>
                    <div class="text-blue text-r">
                        <div class="mb10" v-if="info.email">{{info.email}}</div>
                        <div class="mb10" v-else>未绑定邮箱</div>
                        <div v-if="info.email">
                            <span>已认证</span>
                            <span class="ml10 mr10">|</span>
                            <router-link to="/enterprise/update-email">修改</router-link>

                        </div>
                        <div v-else>
                            <router-link to="/enterprise/update-email">去绑定</router-link>
                        </div>
                    </div>
                </div>
                <div class="safe-item flex-row-space-between">
                    <div class="flex-row-start flex-center">
                        <img class="img" src="../../../assets/image/enterprise/mobile.png" alt="a">
                        <div class="ml10">
                            <p class="text-black mb5 bold">手机</p>
                            <p class="text-gray">绑定手机号码，可以增加求职反馈的及时性和准确性</p>
                        </div>
                    </div>
                    <div class="text-blue text-r">
                        <div class="mb10">{{info.phone}}</div>
                        <div>
                            <span>已认证</span>
                            <span class="ml10 mr10">|</span>
                            <router-link to="/enterprise/update-phone">修改</router-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {getAccountById, updateEmail, updateUserName} from "@/api/enterprise";
import {checkResponse} from "@/utils";

export default {
    name: 'enterpriseWorkAccountSafe',
    components: {},
    data() {
        return {
            info: {}
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            this.getAccountInfoById();
        },
        updateUserName() {
            let app = this;
            this.$prompt('请输入新的用户名', '修改用户名', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({value}) => {
                updateUserName({userName: value}).then(res => {
                    if (checkResponse(res, true)) {
                        app.init();
                        app.$message({
                            type: 'success',
                            message: '修改成功'
                        })
                    }
                })
            }).catch(() => {
            })
        },
        getAccountInfoById() {
            getAccountById().then(res => {
                this.info = res.datas
            });
        },
    }
}
</script>
<style lang="scss">
@import "../../../assets/styles/enterprise/base";

.enter-work-account-safe {
    background: #FFF;
    padding: 10px 20px;
    margin-bottom: 100px;

    .account-safe-content-view {

        .safe-list {
            .safe-item {
                border: 1px solid #E8E8E8;
                border-radius: 2px;
                padding: 15px;
                margin-bottom: 20px;

                .img {
                    width: 50px;
                    height: 50px;
                }
            }
        }

    }
}
</style>
